﻿
@{
    ViewBag.Title = "Index";
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Ext.grid.Panel</title>
    <!--引入extjs样式文件-->
    <link rel="stylesheet" type="text/css" href="ExtJS/classic/theme-triton/resources/theme-triton-all.css" />
    <!--引入核心库-->
    <script type="text/javascript" src="ExtJS/ext-all.js"></script>
    <!--引入国际化文件-->
    <script src="ExtJS/classic/locale/locale-zh_CN.js"></script>

    <script>
            var userList = '@(Html.Raw(ViewBag.userStore))';
           
            //Ext初始化完成后才可以调用其中方法
            Ext.onReady(function () {

                Ext.define('User', {
                    extend: 'Ext.data.Model',
                    fields: [
                        { name: 'id', type: 'int' },
                        { name: 'account', type: 'string' },
                        { name: 'lastname', type: 'string' },
                        { name: 'phone', type: 'string' },
                        { name: 'age', type: 'int' },
                        { name: 'state', type: 'boolean' }
                    ]
                });
                //获取数据
                var myStore = Ext.create('Ext.data.Store', {
                    model: 'User',
                    pageSize: 4,
                    data: Ext.JSON.decode(userList)  
                });
                
                
                //创建一个Panel
                Ext.create('Ext.grid.Panel', {
                    title: '用户管理',
                    store: myStore,
                    forceFit: true,
                    columnLines: true,
                    renderTo: "ddd",
                    bbar: [{ xtype: 'pagingtoolbar', displayinfo: true, store: myStore }], //分页条   
                    viewConfig: { columnsText: '显示列', sortAscText: '升序', sortDescText: '降序' },
                    columns: [
                        { text: '序号', dataIndex: 'id' },
                        { text: '账号', dataIndex: 'account' },
                        { text: '名字', dataIndex: 'lastname' },
                        { text: '电话', dataIndex: 'phone' },
                        { text: '年龄', dataIndex: 'age' },
                        { text: '状态', dataIndex: 'state', renderer: function (value) { return value ? "在职" : "<font color='red'>离职</font>" } }
                    ]
                   
                });
            })
        </script>
</head>
<body>
    <div id="ddd"></div>
</body>
</html>
